<!DOCTYPE HTML>
<html>
<head>
<%@include file="headHtml.jsp" %>
<title>MediaVault: Welcome</title>
</head>
<body onload="loadPlayer();playerShow(false);">

<%@include file="header.jsp" %>
<div id='mainContentDiv'><img id='loadingImage' src='images/ajax-loader.gif' /></div>

<div id="player"></div><a id="showplayer" href="javascript:playerShow(true)" class="reg_button">show player</a>
<script>

var loadingString = "<img id='loadingImage' src='images/ajax-loader.gif' />";
var navigateString = "type={0}&sort={1}&desc={2}&sP={3}&sT={4}&offset={5}&list={6}";
var currentType = "";
var state = {page: "stat", type: "", sort: "", desc: false, searchP: "", searchT: "", offset: 0, listP:-1};
var mainContentDiv = null;
var uploadLink, allLinks;
var table;

window.onpopstate = function(event)
{
	if (event.state != null)
	{
		state = event.state;
		loadPage(state.page, true);
	}


}

$(document).ready(function() {
	
		
	formattedString = navigateString.format(state.type, state.sort,state.desc ? "y" : "n", state.searchP, state.searchT, state.offset, state.listP);
	history.replaceState(state, "", "");
	mainContentDiv = $("#mainContentDiv");
	uploadLink = $("#navBarLink_upload");
	allLinks = $('.navBarLink');
	loadPage(state.page);
	

});

function loadPage(page, a)
{
	allLinks.removeClass("selected");
	if (page == 'stat')
	{
		mainContentDiv.load('/stat.jsp');
		state.page = 'stat';
		if (a)
		{
			return;
		}
		history.pushState(state, "", "");
	}
	else if(page == 'image' || page == 'video' || page == 'audio')
	{
		state.page = page;
		state.type = page;
		$('#navBarLink_' + page).addClass('selected');
		if (a== null)
		{
			a = false;
		}
		loadContentPage(page, a);
		
	}
	else if (page == 'upload')
	{
		state.page = 'upload';
		mainContentDiv.load('/upload.jsp', function(){initUpload();});
		uploadLink.addClass("selected");
		if (a)
		{
			return;
		}
		history.pushState(state, "", "");
	}
}

function loadContentPage(type, a)
{
	currentType = '';
	state.type = type;
	state.offset = 0;
	if (!a)
	{
		state.listP = -1;
	}
	state.searchT = "";
	loadingString = "<img id='loadingImage' src='images/ajax-loader.gif' />";
	mainContentDiv.load("/content.jsp", "type="+type, function(){
		$('#columnsDiv').toggle("blind");
		table = $('#tableDiv');
		loadTable(a);

		loadPlayLists();
		});
}

function setupColumns()
{
	$('#columnsDiv').find('input').each(function(index, element){
			var column = $('td.'+element.value);
			
			if (element.checked)
			{
				changecss('td.'+element.value,'display','table-cell');				
			}
			else {
				changecss('td.'+element.value,'display','none');
			}

	});
}

function loadPlayLists()
{
	$('#listTabs').load("playlists.jsp", "type="+state.type +"&list="+state.listP, function(){
		state.searchT = "";
		$('div.dropClass, a.dropClass').droppable({hoverClass: "dropping", drop: receiveDrop, accept: ".draggable"});
		
	});
}


	
function receiveDrop(event, ui)
{
	addMediaToList2($(this).attr('id'), ui.helper.attr('title'));
	$('.dropping').removeClass('dropping');
}

function loadTable(a)
{

	var formattedString = navigateString.format(state.type, state.sort,state.desc ? "y" : "n", state.searchP, state.searchT, state.offset, state.listP);
	var table = $("#tableDiv");
	document.getElementById('searchQuery').value = state.searchT;
	if (currentType == state.type)
	{
		table.html(loadingString);
		
		table.load("/table.jsp", formattedString, function(){
			 $( ".draggable" ).draggable({ opacity: 0.7, helper: 'clone' });
			 setupColumns();
		});	
	} 
	else
	{
		
		table.load("/table.jsp", formattedString, function() {
			  loadingString = "<table class='contentTable' id='mainContentTable'><tr id='tableHeader'>" + $('#tableHeader').html() + "</tr></table>" + loadingString;
			  initContentTable('mainContentTable');
			  $( ".draggable" ).draggable({ opacity: 0.7, helper: 'clone' });
			  setupColumns();
		});
	}
	currentType = state.type;
	if (a)
	{
		return;
	}
	history.pushState(state, "", "");
}

String.prototype.format = function() {
	var args = arguments;
	return this.replace(/{(\d+)}/g, function(match, number) {
		return typeof args[number] != 'undefined' ? args[number] : '{'
				+ number + '}';
	});
};

function sortNavigate(sortParam) 
{

	var formattedString = "";	
	
	if (sortParam == state.sort)
	{
	
		state.desc = !(state.desc);
	}
	state.offset = 0;
	state.sort = sortParam;
	
	reloadTable();
}

function pageNavigate(direction)
{

	var formattedString = "";
	
	if (direction == 'forward')
	{
		state.offset = state.offset + 10;
	}
	else if (direction == 'back')
	{
		state.offset = state.offset - 10;
	}
	if (state.offset < 0)
	{
		state.offset = 0;
	}

	reloadTable();
}

function searchNavigate()
{
	var select, selectIndex, selectOptions;
	var formattedString = "";
	

	select=document.getElementById("searchParamSelect");
	selectIndex = select.selectedIndex;
	selectOptions = select.options;
	state.searchP = selectOptions[selectIndex].value;
	state.searchT = document.getElementById("searchQuery").value;
	
	state.offset = 0;
	
	reloadTable();
}

function listNavigate(listKey){
	state.listP = listKey;
	state.searchT = "";
	state.offset = 0;
	loadTable();
	loadPlayLists();
}


function reloadTable(){
	loadTable();
}


function addMediaToList2(listId, key){
	var selector = document.getElementById('addToListSelector');
	
	jQuery.get('/medialist?command=addtolist&listkey=' + listId + '&mediakey=' + key);
}

function removeMediaFromList(listId, key){
	jQuery.get('/medialist?command=removefromlist&listkey=' + listId + '&mediakey=' + key);
	reloadTable();
}

function deleteMediaFile(key){
	jQuery.get('/deletefile?key=' + key);
	reloadTable();
}

function addNewList(){
	var field = document.getElementById('newListName');
	
	jQuery.get('/medialist?command=addlist&type='+currentType+'&name='+field.value, function(){loadPlayLists();} );
	loadPlayLists();
	
}

function removeCurrentList(){
	jQuery.get('/medialist?command=removelist&key='+state.listP, function(){loadPlayLists();listNavigate('')} );
}


function loadPlayer(){
	$('#player').load("player.jsp", function(){setupPlayer()});
}

function playerShow(show){
	if(show){
		$('#player').show();
		$('#showplayer').hide();
	}else{
		$('#player').hide();
		$('#showplayer').show();
	}
}

</script>
</body>
</html>



